<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/sm.css">
    <link rel="stylesheet" href="css/sm-extend.css">
    <!--<script type="text/javascript" src="//g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>-->
    <script src="scripts/zepto.js"></script>
    <script src="scripts/sm.js"></script>
    <script src="scripts/sm-extend.js"></script>

</head>
<body>
<input type="text" id='picker'/>
<script>
    $("#picker").picker({
        toolbarTemplate: '<header class="bar bar-nav">\
  <button class="button button-link pull-left">按钮</button>\
  <button class="button button-link pull-right close-picker">确定</button>\
  <h1 class="title">标题</h1>\
  </header>',
        cols: [
            {
                textAlign: 'center',
                values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
            }
        ]
    });
</script>

<!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
<!--<div class="page-group">-->
    <!--&lt;!&ndash; 单个page ,第一个.page默认被展示&ndash;&gt;-->
    <!--<div class="page page-current" id="page1">-->
        <!--&lt;!&ndash; 标题栏 &ndash;&gt;-->
        <!--<header class="bar bar-nav">-->
            <!--&lt;!&ndash;加了动画特效&ndash;&gt;-->
            <!--<a class="button button-link button-nav pull-left" href="/demos/card" data-transition='slide-out'>-->
                <!--<span class="icon icon-left"></span>-->
                <!--返回-->
            <!--</a>-->
            <!--<h1 class="title">我的生活</h1>-->
        <!--</header>-->
        <!--&lt;!&ndash; 工具栏/底部的选项卡 &ndash;&gt;-->
        <!--<nav class="bar bar-tab">-->
            <!--<a class="tab-item external active" href="#">-->
                <!--<span class="icon icon-home"></span>-->
                <!--<span class="tab-label">首页</span>-->
            <!--</a>-->
            <!--<a class="tab-item external" href="#">-->
                <!--<span class="icon icon-star"></span>-->
                <!--<span class="tab-label">收藏</span>-->
            <!--</a>-->
            <!--<a class="tab-item external" href="#">-->
                <!--<span class="icon icon-settings"></span>-->
                <!--<span class="tab-label">设置</span>-->
            <!--</a>-->
        <!--</nav>-->

        <!--&lt;!&ndash; 这里是页面内容区/页面的主题部分 &ndash;&gt;-->
        <!--<div class="content">-->
            <!--<div class="page-index">-->
                <!--&lt;!&ndash;卡片一&ndash;&gt;-->
                <!--<div class="card">-->
                    <!--<div style="background-image:url(img/01.png)" valign="bottom" class="card-header color-white no-border">旅途的山</div>-->
                    <!--<div class="card-content">-->
                        <!--<div class="card-content-inner">-->
                            <!--<p class="color-gray">发表于 2015/01/15</p>-->
                            <!--<p>此处是内容...</p>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="card-footer">-->
                        <!--<a href="#" class="link">赞</a>-->
                        <!--<a href="#" class="link">更多</a>-->
                    <!--</div>-->
                <!--</div>-->
                <!--&lt;!&ndash;卡片二&ndash;&gt;-->
                <!--<div class="card">-->
                    <!--<div style="background-image:url(img/01.png)" valign="bottom" class="card-header color-white no-border">旅途的山</div>-->
                    <!--<div class="card-content">-->
                        <!--<div class="card-content-inner">-->
                            <!--<p class="color-gray">发表于 2015/01/15</p>-->
                            <!--<p>此处是内容...</p>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="card-footer">-->
                        <!--<a href="#" class="link">赞</a>-->
                        <!--<a href="#" class="link">更多</a>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->

<!--<script src="scripts/zepto.js"></script>-->
<!--<script src="scripts/sm.js"></script>-->
<!--<script src="scripts/sm-extend.js"></script>-->

</body>
</html>